<script setup>
    import { nextTick, onMounted, onUnmounted } from 'vue'
    import CardTitle from '../../../components/CardTitle.vue'
    import * as echarts from "echarts"
    import { getAgriculturalDetails } from '@/api/home'

    const props = defineProps({
        proportionData: {
            type: Object,
            default: {}
        }
    })
    
    let seriesData = $ref([])
    let proportionPie = $ref(null)
    let eCharts = null

    let resData = $ref(props.proportionData)

    onMounted(()=>{
        init()
        getList()
    })

    const init = (type) => {
        
        let { vegetableRatio, wheatRatio, maizeRatio, cottonRatio, oilPlantsRatio, otherRatio } = resData

        seriesData = [
            {
                name: '蔬菜',
                value: vegetableRatio ? Number(vegetableRatio) : 0
            },
            {
                name: '小麦',
                value: wheatRatio ? Number(wheatRatio) : 0
            },
            {
                name: '玉米',
                value: maizeRatio ? Number(maizeRatio) : 0
            },
            {
                name: '棉花',
                value: cottonRatio ? Number(cottonRatio) : 0
            },
            {
                name: '油料',
                value: oilPlantsRatio ? Number(oilPlantsRatio) : 0
            },
            {
                name: '其他',
                value: otherRatio ? Number(otherRatio) : 0
            }
        ]

        const option = {
            legend: {
                left: '46%',
                top: '20%',
                itemWidth: 30,// 标志图形的长度
                itemHeight: 15,// 标志图形的宽度
                itemGap: 10,
                orient: 'horizontal',
                textStyle: {
                    fontSize: 16,// 字体大小
                    color: '#ffffff'// 字体颜色
                },
                formatter: function(name) {
                    var data = option.series[0].data;//获取series中的data
                    var total = 0;
                    var tarValue;
                    for (var i = 0, l = data.length; i < l; i++) {
                        total += data[i].value;
                        if (data[i].name == name) {
                            tarValue = data[i].value;
                        }
                    }
                    var p = ((tarValue / total) * 100);
                    return name + " " + " " + p.toFixed(0) + "%";
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [60, 100],
                    center: ['24%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 0
                    },
                    label: {
                        show: false
                    },
                    data: seriesData
                }
            ]
        }

        if(!type) eCharts = echarts.init(proportionPie)
        eCharts.setOption(option)
    }

    const refreshData = (data) => {
        eCharts.clear()
        //刷新数据
        init('refresh')
    }

    let timer = undefined
    const getList = () => {
        getAgriculturalDetails().then(res => {
            if(res.success){
                resData = res.result
                timer = setTimeout(() => {
                    refreshData()

                    nextTick(() => {
                        clearTimeout(timer)
                        getList()
                    })
                }, 5 * 1000)
            }
        })
    }

    onUnmounted(() => {
        clearTimeout(timer)
    })


</script>

<template>
    <div class="project-view"> 
        <card-title title="特色农产品占比"></card-title>

        <div ref="proportionPie" class="proportion-pie"></div>

    </div>
</template>

<style lang="less" scoped>
    .project-view{
        width: 100%;
        height: 341px;
        background: url('../../../assets/images/proportion.png') center no-repeat;
        background-size: 100% 341px;

        .proportion-pie{
            // width: 194px;   
            height: 200px;
        }
    }
</style>